<template>
  <div class="app-container">
    <el-form :inline="true" :model="pageInfo" class="demo-form-inline">
      <el-form-item label="解约合同编号">
        <el-input v-model="pageInfo.cfTerminationNo" placeholder="请输入解约合同编号"></el-input>
      </el-form-item>
      <el-form-item label="录入人">
        <el-input v-model="pageInfo.inputUserName" placeholder="录入人"></el-input>
      </el-form-item>
      <el-form-item label="小区名称">
        <el-input v-model="pageInfo.premiseName" placeholder="请输入小区名称"></el-input>
      </el-form-item>
      <el-form-item label="协议录入日期">
        <el-date-picker
          v-model="pageInfo.t1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        至
        <el-date-picker
          v-model="pageInfo.t2"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="tenantName"
          label="租客姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="cfTerminationNo"
          label="解约合同编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="premiseName"
          label="小区"
          width="180">
        </el-table-column>
        <el-table-column
          prop="terminationType"
          label="解约类型">
          <template slot-scope="scope">
            <span v-if="scope.row.terminationType==1">合同到期</span>
            <span v-if="scope.row.terminationType==2">租客提前解约</span>
            <span v-if="scope.row.terminationType==3">我方退租解约</span>
            <span v-if="scope.row.terminationType==4">其他</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="terminationDate"
          label="解约日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="auditDate"
          label="审核日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="finalStatement"
          label="结算金额"
          width="180">
        </el-table-column>
        <el-table-column
          prop="inputDate"
          label="录入日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="inputUserName"
          label="录入人"
          width="180">
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[10, 30, 50, 70]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

import axios from "axios";
export default {
  created() {
    this.list()
  },
  name: "contracthtjy",
  data() {
    return {
      tableData: [],
      pageInfo:{
        pageNum:1,
        pageSize:10,
        cfTerminationNo:null,
        inputDate:null,
        premiseName:null,
        inputUserName:null,
        t1:null,
        t2:null
      },
      total:null,
      form:{
        id:'',
        tenantName:'',
        terminationType:'',
        cfTerminationNo:'',
        terminationDate:'',
        premiseName:'',
        auditDate:'',
        finalStatement:'',
        inputDate:'',
        inputUserName:'',
      }
    }
  },
  methods: {
    list() {
      axios.get('http://localhost:8200/hou/terminationController/selects', {params: this.pageInfo}).then((response) => {
        console.log(response.data)
        this.tableData = response.data.obj.list
        this.pageInfo.pageNum = response.data.obj.pageNum
        this.pageInfo.pageSize = response.data.obj.pageSize
        this.total = response.data.obj.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageInfo.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageInfo.pageNum = val
      this.list()
    },
    onSubmit() {
      console.log('submit!')
      this.list()
    }
  }
}
</script>

<style scoped>

</style>
